<template>
  <GlobalHeader></GlobalHeader>
  <v-app>
  <v-img :src="currentBackground" class="particle-background" />
  <v-container class="dynamic-container" :class="{ 'dark-mode': isDarkMode }">

    <!-- 背景粒子效果容器 -->
    <div class="particle-background" :style="{ backgroundImage: `url(${currentBackground})` }"></div>

    <!-- 主内容 -->
    <v-row justify="center" class="header-row">
      <v-col cols="12" class="text-center">
        <h2 class="main-title" ref="titleRef" style="color:dodgerblue;"></h2>
      </v-col>
    </v-row>

    <!-- 基础检查部分 -->
    <v-row justify="center" class="section-row">
      <v-col cols="12" class="text-center">
        <h3 class="section-subtitle" style="color:#1565c0;">基础检查</h3>
      </v-col>
    </v-row>
    <v-row justify="center" class="card-row">
      <v-col v-for="(item, index) in efficiencyItems" :key="index" cols="12" md="4" sm="6">
        <v-card
            class="dynamic-card"
            :class="{ 'flipped': flipped[index] }"
            @mouseenter="hoverCard(index, true)"
            @mouseleave="hoverCard(index, false)"
        >
          <div class="card-front">
            <v-icon :size="56" :color="item.color" class="mb-3 dynamic-icon">{{ item.icon }}</v-icon>
            <v-card-title class="card-title">{{ item.title }}</v-card-title>
            <v-card-text class="card-text">{{ item.text.slice(0, 100) + '...' }}</v-card-text>
          </div>
          <div class="card-back">
            <v-card-text class="card-text">{{ item.text }}</v-card-text>
          </div>
        </v-card>
      </v-col>
    </v-row>

    <!-- 运行性能部分 -->
    <v-row justify="center" class="section-row">
      <v-col cols="12" class="text-center">
        <h3 class="section-subtitle" style="color: #1976d2">运行性能</h3>
      </v-col>
    </v-row>
    <v-row justify="center" class="card-row">
      <v-col v-for="(item, index) in resourceItems" :key="index" cols="12" md="4" sm="6">
        <v-card
            class="dynamic-card"
            :class="{ 'flipped': flipped[index + efficiencyItems.length] }"
            @mouseenter="hoverCard(index + efficiencyItems.length, true)"
            @mouseleave="hoverCard(index + efficiencyItems.length, false)"
        >
          <div class="card-front">
            <v-icon :size="56" :color="item.color" class="mb-3 dynamic-icon">{{ item.icon }}</v-icon>
            <v-card-title class="card-title">{{ item.title }}</v-card-title>
            <v-card-text class="card-text">{{ item.text.slice(0, 100) + '...' }}</v-card-text>
          </div>
          <div class="card-back">
            <v-card-text class="card-text">{{ item.text }}</v-card-text>
          </div>
        </v-card>
      </v-col>
    </v-row>

    <!-- 品牌声誉部分 -->
    <v-row justify="center" class="section-row">
      <v-col cols="12" class="text-center">
        <h3 class="section-subtitle" style="color: #1565c0">品牌声誉</h3>
      </v-col>
    </v-row>
    <v-row justify="center" class="card-row">
      <v-col v-for="(item, index) in sustainabilityItems" :key="index" cols="12" md="4" sm="6">
        <v-card
            class="dynamic-card"
            :class="{ 'flipped': flipped[index + efficiencyItems.length + resourceItems.length] }"
            @mouseenter="hoverCard(index + efficiencyItems.length + resourceItems.length, true)"
            @mouseleave="hoverCard(index + efficiencyItems.length + resourceItems.length, false)"
        >
          <div class="card-front">
            <v-icon :size="56" :color="item.color" class="mb-3 dynamic-icon">{{ item.icon }}</v-icon>
            <v-card-title class="card-title">{{ item.title }}</v-card-title>
            <v-card-text class="card-text">{{ item.text.slice(0, 100) + '...' }}</v-card-text>
          </div>
          <div class="card-back">
            <v-card-text class="card-text">{{ item.text }}</v-card-text>
          </div>
        </v-card>
      </v-col>
    </v-row>

<!--    &lt;!&ndash; 主题切换按钮 &ndash;&gt;-->
<!--    <v-btn class="theme-toggle" @click="toggleTheme" fab small>-->
<!--      <v-icon>{{ isDarkMode ? 'mdi-white-balance-sunny' : 'mdi-moon-waxing-crescent' }}</v-icon>-->
<!--    </v-btn>-->

<!--    &lt;!&ndash; 背景切换按钮 &ndash;&gt;-->
<!--    <v-btn class="background-toggle" @click="changeBackground" fab small>-->
<!--      <v-icon>mdi-image</v-icon>-->
<!--    </v-btn>-->

  </v-container>
  </v-app>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';
import Typed from 'typed.js';




// 背景图片数组（使用 require 导入）
import bg1 from '@/assets/images/Calculate/back1.jpg';
import bg2 from '@/assets/images/Calculate/back1.jpg';
import bg3 from '@/assets/images/Calculate/back2.jpg';
import GlobalHeader from "@/components/Index/GlobalHeader.vue";
const backgroundImages = ref([bg1, bg2, bg3]);


// 当前背景图片
const currentBackground = ref(backgroundImages.value[0]);


// 数据定义
const efficiencyItems = ref([
  {
    icon: 'mdi-speedometer',
    color: 'primary',
    title: '1.外观检查',
    text: '外观检查可以快速识别装备的物理状况,包括明显的损坏、磨损﹑腐蚀或老化迹象。装备的外观状况可以间接反映其维护和保养的历史。外观缺陷可能指示需要进行的修复' +
        '或更换工作,这将影响装备的修复成本和总成本估算﹐了解这些成本对于确定装备的经济价值至关重要;外观检查可以帮助评估装备的剩余使用寿命,因为装备的物理状况是判断其能否继续有效运行的重要因素。买家通常会基于外观检查的结果来做出购买决策，如果装备外观状况良好,可能会增加买家的信心,从而促进交易的完成。',

  },
  {
    icon: 'mdi-chart-timeline-variant',
    color: 'info',
    title: '2.装配工艺',
    text: '装配工艺直接影响电力装备的性能﹐精良的装配工艺可以确保设备各部分的准确对接,提高设备的运行效率和可靠性。良好的装配工艺可以减少设备故障' +
        '率及缺陷率,当设备的各个组件被正确且牢固地安装时,它们之间的摩擦和磨损会减少,从而降低发生故障的可能性。这有助于延长设备的使用寿命' +
        '并保持较高的残余价值。优质的装配工艺可以降低后期维修成本,设备在装配过程中使用了高质量的材料和工艺,在未来的运行中可能需要较少的' +
        '维修和更换零件,从而降低维护费用。同时,良好的装配工艺可以提高设备的可维护性,当设备的结构设计合理、组件易于拆卸和更换时,维护人' +
        '员可以更容易地进行维修和保养工作,这也有助于及时发现和修复潜在问题,延长设备的使用寿命。',

  },
  {
    icon: 'mdi-material-design',
    color: 'success',
    title: '3.发票及合同等材料齐全情况',
    text: '发票和合同是证明电力装备所有权的重要法律文件。在进行残余价值评估时,这些文件可以证明被评估资产的合法性和所有权归属,确' +
        '保评估的对象是企业合法拥有的资产。发票和合同记录了电力装备的原始购买成本,这是计算折旧和评估残余价值的基础。没' +
        '有准确的成本信息,评估结果可能会受到影响。合同中通常会包含设备的技术参数﹑性能指标等信息,这些信息有助于评估' +
        '人员了解设备的设计用途和维护状况,从而更准确地评估其残余价值。在财务审计过程中,发票和合同是核实资产价值和计提折' +
        '旧的重要凭证,审计人员会检查这些文件以确保财务报表的准确性。在发生争议或法律诉讼时,发票和合同是证明资产价值和交易合法性的关键证据。',

  }

]);

const resourceItems = ref([
  {
    icon: 'mdi-link',
    color: 'primary',
    title: '4.电气性能',
    text: '电气性能是电力装备的核心指标，了解装备的电气性能有助于评估维持运行所需的维修和维护成本﹐良好' +
        '的电气性能意味着装备可能有较高的再利用潜力,同时还可以规避技术过时的风险,技术过时可能会迅速降低' +
        '装备的评估价值。电气性能高的装备更容易满足市场的需求,因此可能具有较高的残余价值,投资者在考虑购买或' +
        '投资电力装备时,会评估其电气性能以预测潜在的投资回报﹐性能优越的装备可能会带来更高的回报。',

  },

  {
    icon: 'mdi-package-variant-closed',
    color: 'primary',
    title: '5.机械性能',
    text: '机械性能直接关联到电力装备的结构完整性和耐用性。机械性能的评估有助于预测装备的剩余使用寿命' +
        ',装备如果显示出良好的机械状态,可能具有更长的使用寿命、较低的故障风险。机械性能的优劣影响装备的运' +
        '行效率,高效率的装备不仅运行成本更低,而且对潜在买家更具吸引力。',

  },
  {
    icon: 'mdi-truck-delivery',
    color: 'primary',
    title: '6.密封性能',
    text: '良好的密封性能可以确保电力装备在不同的环境条件下保持稳定的性能,如果密封性能不佳,可能需' +
        '要频繁维修和更换部件,增加磨损及腐蚀,提高维护成本,降低设备的残余价值。同时﹐良好的密封性能可' +
        '以有效防止油、潜在有害气体或液体的泄漏,避免造成环境污染,增加环境治理费用。',

  },
  {
    icon: 'mdi-water-percent',
    color: 'success',
    title: '7.运行时长',
    text: '运行时长是衡量装备老化程度的一个重要指标。设备运行时间越长,其磨损程度越高、性能下' +
        '降程度越深,从而降低其残余价值。同时,运行时长可以帮助评估人员确定装备的关键部件更换周期,从而预测未来的维护和更换成本。',

  },
  {
    icon: 'mdi-solar-power',
    color: 'success',
    title: '8.故障率/缺陷率与维修记录',
    text: '从电力装备检修专业角度来看,故障率与缺陷率之间存在一定联系，但也有明显区别。缺陷一般指装备运行过程中出现影响其正' +
        '常运行的异常现象﹐例如变压器漏油等。故障一般指装备出现导致其停运等的重大异常现象。故障率与缺陷率均是衡量电力装备可靠性' +
        '的关键指标,较低的故障率/缺陷率通常意味着装备运行稳定,维修记录则提供了装备维护历史的详细信息﹐评估人员可以根据这些信息预测未来的维护成本。',

  },


]);

const sustainabilityItems = ref([

  {
    icon: 'mdi-account-tie',
    color: 'info',
    title: '9.历史履约情况',
    text: '在评估项目或合同的执行情况时，历史履约情况是一个重要的参考指标。通过对过往履约记录的分析，可以全面了解承办方或合作方在以往项目中的表现' +
        '，包括合同执行的及时性、质量达标情况、资金使用的合规性以及沟通协作能力等。如果历史履约情况良好，说明其具有较强的项目管理能力和责任意识' +
        '，具备按期高质量完成任务的能力；反之，若存在频繁延误、质量问题或合同违约等情况，则需要在新项目合作中提高审慎程度，可能需要增加监管措施或选' +
        '择其他合作对象。因此，评估历史履约情况不仅有助于风险控制，也为后续合作提供了重要依据，尤其在政府采购、工程建设和服务外包等领域具有重要参考价值。' +
        '通过科学合理地运用历史履约信息，可以有效提高项目执行效率，保障合同目标的实现。',

  },

  {
    icon: 'mdi-biohazard',
    color: 'success',
    title: '10.品牌知名度',
    text: '品牌知名度通常与市场接受度成正比。知名品牌的电力装备更容易被市场接受，因为它们往往代表了一定的质量标准和用户信任' +
        '。这种接受度有助于提高设备的可销售性和流动性。知名品牌通常提供更完善的售后服务和维护支持，这种支持可以延长设备的使' +
        '用寿命,减少维修成本，从而提高其残余价值。品牌的知名度和市场地位可以影响设备的折旧速度,一般来说,知名品牌的设备折旧速度' +
        '较慢,因为市场对其需求持续且稳定。知名品牌往往拥有稳定的用户群体和市场份额。这意味着即使在二手市场上,也有较大的潜在买家群' +
        '体，有助于提高设备的转售价值。',

  }
]);

// 卡片翻转状态
const flipped = ref([]);

// 主题状态
const isDarkMode = ref(false);

// 标题引用
const titleRef = ref(null);
titleRef.value = undefined;

// 悬停动画
const hoverCard = (index, isHover) => {
  flipped.value[index] = isHover;
  const card = document.querySelectorAll('.dynamic-card')[index];
  if (isHover) {
    gsap.to(card, { rotationY: 180, duration: 0.5, ease: 'power2.out' });
    gsap.to(card.querySelector('.dynamic-icon'), { scale: 1.2, rotation: 360, duration: 0.5 });
  } else {
    gsap.to(card, { rotationY: 0, duration: 0.5, ease: 'power2.out' });
    gsap.to(card.querySelector('.dynamic-icon'), { scale: 1, rotation: 0, duration: 0.5 });
  }
};

// 主题切换
// 页面加载动画
onMounted(() => {
  // 打字机效果
  new Typed(titleRef.value, {
    strings: ['助力企业实现资源高效利用与可持续发展'],
    typeSpeed: 50,
    showCursor: false,
  });

  // 卡片加载动画
  gsap.from('.dynamic-card', {
    opacity: 0,
    y: 50,
    duration: 1,
    stagger: 0.2,
    ease: 'power3.out',
  });

  // 背景视差效果
  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    gsap.to('.particle-background', { y: scrollY * 0.2, duration: 0.5 });
  });

  // 调试背景图片加载
  backgroundImages.value.forEach((img, index) => {
    const image = new Image();
    image.src = img;
    image.onload = () => console.log(`Background image ${index + 1} loaded successfully`);
    image.onerror = () => console.error(`Failed to load background image ${index + 1}`);
  });
});
</script>

<style scoped>

.v-container {
  position: relative;
  z-index: 1; /* 确保内容在上层 */
}
/* 全局CSS变量 */
:root {
  --primary-color: #1b76bf;
  --secondary-color: #424242;
  --background-light: #f5f5f5;
  --background-dark: #212121;
  --text-light: #000000;
  --text-dark: #ffffff;
}

/* 容器样式 */
.dynamic-container {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  max-width: 1900px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(200, 200, 200, 0.5));
  transition: background 0.5s;
}

.dynamic-container.dark-mode {
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.8), rgba(20, 20, 20, 0.5));
}

/* 背景粒子效果 */
.particle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: -1;
  transition: opacity 0s ease;
  animation: subtleZoom 20s infinite alternate;
}

/* 回退背景 */
.particle-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(200, 200, 200, 0.5), rgba(150, 150, 150, 0.3));
  z-index: -1;
}

@keyframes subtleZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

/* 标题样式 */
.main-title {
  font-weight: 600;
  font-size: 60px;
  color: var(--primary-color);
  margin-bottom: 40px;
}

.section-subtitle {
  font-weight: 600;
  font-size: 40px;
  color: var(--secondary-color);
  margin-bottom: 20px;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.image-container {
  position: relative;
  width: 100%;
  height: 100vh; /* 根据需要调整 */
}

/* 卡片样式 */
.dynamic-card {
  position: relative;
  perspective: 1000px;
  height: 400px;
  transition: box-shadow 0.3s;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  overflow: hidden;
}

.dynamic-card.dark-mode {
  background: rgba(50, 50, 50, 0.9);
}

.dynamic-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 20px var(--primary-color);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.5s;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
  padding: 20px;
}

.flipped .card-front {
  transform: rotateY(-180deg);
}

.flipped .card-back {
  transform: rotateY(0deg);
}

.card-title {
  font-weight: 600;
  font-size: 24px;
  color: cornflowerblue;
}
/* 图片样式 */
.particle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  object-fit: cover; /* 确保图片适应容器 */
  z-index: -1; /* 放置在内容下方 */
  opacity: 1; /* 设置透明度 */
  transition: opacity 1s ease;
}

.card-text {
  font-size: 16px;
  color: var(--secondary-color);
  text-align: left;
}

.dark-mode .card-text {
  color: var(--text-dark);

}

/* 图标动画 */
.dynamic-icon {
  transition: transform 0.3s ease;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 主题切换按钮 */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  transition: transform 0.3s;
}

.theme-toggle:hover {
  transform: scale(1.2);
}

/* 背景切换按钮 */
.background-toggle {
  position: fixed;
  bottom: 70px;
  right: 20px;
  z-index: 1000;
  transition: transform 0.3s;
}
/* 标题样式 */
.main-title {
  font-weight: 600;
  font-size: 60px;
  color: #1e88e5;
  margin-bottom: 40px;
}
.section-subtitle {
  font-weight: 600;
  font-size: 40px;
  color: #424242;
  margin-bottom: 20px;
}
.background-toggle:hover {
  transform: scale(1.2);
}

/* 响应式调整 */
@media (max-width: 600px) {
  .main-title {
    font-size: 40px;
  }
  .section-subtitle {
    font-size: 28px;
  }
  .card-title {
    font-size: 20px;
  }
  .dynamic-card {
    height: 350px;
  }
}
</style>